<template>
  <div 
    class="loading-state" 
    :class="[
      `loading-state--${size}`,
      { 'loading-state--overlay': overlay }
    ]"
  >
    <div class="loading-state__spinner">
      <div class="spinner-container">
        <div class="spinner"></div>
      </div>
      <div v-if="text" class="loading-state__text">{{ text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';

export interface LoadingStateProps {
  /**
   * 加载文本提示
   */
  text?: string;
  
  /**
   * 加载器尺寸
   * - small: 小型
   * - medium: 中型
   * - large: 大型
   */
  size?: 'small' | 'medium' | 'large';
  
  /**
   * 是否显示为覆盖层
   */
  overlay?: boolean;
}

const props = withDefaults(defineProps<LoadingStateProps>(), {
  text: '',
  size: 'medium',
  overlay: false
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-lg;
  
  &--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($white, 0.8);
    z-index: $z-index-fixed;
  }
  
  &__spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  &__text {
    margin-top: $spacing-md;
    font-size: $font-size-sm;
    color: $text-secondary;
  }
  
  // 尺寸变体
  &--small .spinner {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }
  
  &--medium .spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
  }
  
  &--large .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
  }
}

// 加载动画
.spinner-container {
  display: inline-flex;
  position: relative;
}

.spinner {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid rgba($primary, 0.3);
  border-top-color: $primary;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style> 